<template>
  <view 
    class="mental-health-checkup-entry"
    :style="[{backgroundImage:'url('+staticImgs.boxBg+')'},sty]"
    @click="toCheckup"
  >
    <view class="price-box flex-cc" v-if="price">
      <view class="price">{{price}}</view>
      <view class="sum-price-wrapper">
        <view class="price-unit">元</view>
        <view class="sum-price">原价{{sumPrice}}元</view>
      </view>
    </view>
    <!-- <view class="price-info-top-wrapper">
      <view class="left-box">
          <view class="row-1">个人心理健康体检</view>
          <view class="row-2">
            <text>6个测评打包价</text>
            <view class="price">9.9</view>
            <text class="unit">元</text>
          </view>
      </view>
      <view class="right-box">
         <view class="old-price">
           原价59.4元
           <view class="more-info">最高立省49.5</view>
         </view>
      </view>
    </view>
    <view class="main-wrapper">
      <view class="main-circle-box">
        <view class="main-con">
          <view>全维身心健康</view>
          <view>???</view>
        </view>
        <view class="small-circle-box-bg" :class="['box-'+index]" v-for="(item,index) in boxLabelArr" :key="index">
          <view class="small-circle-box">
            <view class="circle-box-text">
              {{item}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="btn-wrapper" @click="toCheckup">
      <image class="img" :src="staticImgs.btn" mode=""></image>
      
    </view> -->
  </view>
</template>

<script>
  export default {
    props:{
      sourceType:{
        type:[String,Number],
        default:'17'
      },
      sty:{},
      boxBg: {
        type: String,
        default: ''
      }
    },
    data(){
      return {
        staticImgs:{
          boxBg: this.boxBg || (this.imgBaseURL + '/scl/checkup-mental/checkup-mental-entry-box-img-v3.png'),
          btn: this.imgBaseURL + '/scl/checkup-mental/checkup-mental-entry-btn.png',
        },
        boxLabelArr:['焦虑','压力','敏感','人际交往','抑郁'],
        price: '',
        sumPrice: ''
      }
    },
    methods:{
      toCheckup(){
        uni.navigateTo({
          url:'/subcontractorC/pages/sclCheckup/sclCheckup?sourceType=' + this.sourceType
        })
      },
    },
    created() {
      this.$u.api.getCheckUpList().then(res => {
        if (res.data.success) {
          this.price = res.data.data.price
          this.sumPrice = res.data.data.sumPrice
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
.mental-health-checkup-entry{
  width: 740rpx;
  height: 256rpx;
  background-size: 100%;
  background-repeat: no-repeat;
  
  overflow: hidden;
  margin: auto;
  margin-bottom: -30rpx;
  margin-top: -18rpx;
  position: relative;


  // background: linear-gradient( 180deg, #E3FFE7 0%, #D5FFA7 51%, #F0FFF2 100%);
  
  // box-shadow: 0rpx 2rpx 20rpx 0rpx #BFFCB6;
  // border-radius: 22rpx;
  
  // box-sizing: border-box;
  // padding: 22rpx 24rpx 0 24rpx;
  // display: flex;
  // flex-direction: column;
  
  // background-repeat: no-repeat;
  // background-size: 100%;
  
  .price-info-top-wrapper{
    display: flex;
    .row-1{
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 40rpx;
      color: #333333;
      line-height: 56rpx;
      text-align: left;
      font-style: normal;
      // width: 100%;
    }
    
    .row-2{
      // width: 100%;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #1B882B;
      line-height: 40rpx;
      text-align: justify;
      font-style: normal;
      display: flex;
      align-items: center;
      position: relative;
      
      
      .price{
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 60rpx;
        color: #1B882B;
        text-align: justify;
        font-style: normal;
        padding-bottom: 14rpx;
        margin-left: 10rpx;
        margin-right: 6rpx;
      }
      
    }
    
    
    .right-box{
      display: flex;
      align-items: flex-end;
      margin-left: 18rpx;
    }
    
    
    .old-price{
      position: relative;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #278F35;
      line-height: 40rpx;
      text-align: justify;
      font-style: normal;
      padding-bottom: 4rpx;
      text-decoration: line-through;

      
      .more-info{
        left: 0;
        top: -42rpx;
        position: absolute;
        width: 150rpx;
        height: 42rpx;
        background: linear-gradient( 180deg, #FFA094 0%, #FF715B 100%);
        border-radius: 20rpx 0rpx 20rpx 0rpx;
        
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 21rpx;
        color: #FFFFFF;
        line-height: 42rpx;
        // text-align: justify;
        font-style: normal;
        text-align: center;
        
        
      }
    }
    
  }
  

  .main-wrapper{
    height: 360rpx;
    width: 670rpx;
    box-sizing: border-box;
    padding-top: 24rpx;
    // background-color: rgba(55,55,55,.4);
    
    margin-top: 14rpx;
    
    .main-circle-box{
      width: 290rpx;
      height: 290rpx;
      margin: auto;
      border-radius: 100%;
      background: linear-gradient( 180deg, #CDFFE2 0%, #C4FFF6 100%);
      box-shadow: 0rpx 1rpx 40rpx 0rpx #CDFFD4;
      box-sizing: border-box;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      
      
      .small-circle-box-bg{
        position: absolute;
        
        width: 100rpx;
        height: 100rpx;
        
        box-sizing: border-box;
        // box-shadow: 0rpx 2rpx 4rpx 0rpx #4CA459;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        background-color: #fff;
        
        .small-circle-box{
          width: 80rpx;
          height: 80rpx;
          background: linear-gradient( 180deg, #DAF5FF 0%, rgba(212,255,228,0.76) 100%);
          // opacity: 0.7;
          
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 26rpx;
          color: #326876;
          line-height: 80rpx;
          text-align: center;
          font-style: normal;
          border-radius: 100%;
          position: relative;
          
          .circle-box-text{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            word-break: keep-all;
          }
          
          
          
        }
      }
      
      .box-0{
        left: -42rpx;
        top: 0;
      }
      .box-1{
        left: -64rpx;
        top: 114rpx;
      }
      .box-2{
        bottom: -36rpx;
        left: 94rpx;
      }
      .box-3{
        right: -42rpx;
        top: 0;
      }
      .box-4{
        top: 114rpx;
        right: -70rpx;
      }
      
      
    }
  
    .main-con{
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #326876;
      line-height: 40rpx;
      text-align: center;
      font-style: normal;
      // margin: auto;
      // margin-top: 112rpx;
      // display: flex;
      
    }
  }

  .btn-wrapper{
    width: 230rpx;
    height: 60rpx;
    margin: auto;
    margin-top: 18rpx;
    
    .img{
      width: 100%;
      height: 100%;
    }
  }

  .price-box {
    position: absolute;
    top: 47%;
    left: 57%;

    .price {
      font-weight: bolder;
      font-size: 57rpx;
      color: #1B882B;
      line-height: 79rpx;
      letter-spacing: -1rpx;
    }

    .sum-price-wrapper {
      margin-left: 2rpx;

      .price-unit {
        font-weight: bold;
        font-size: 24rpx;
        color: #1B882B;
        line-height: 33rpx;
      }

      .sum-price {
        font-size: 16rpx;
        color: #0A5F5D;
        line-height: 22rpx;
        text-decoration: line-through;
        letter-spacing: -1rpx;
      }
    }
  }
}
</style>